.view-md-box {
  padding: 8px;
  box-sizing: border-box;

  .rendMd {
    * {
      word-break: break-all;
    }
    hr {
      height: 1px;
      border: 0;
      background: #EFEFEF;
      margin: 15px 0;
    }
    p, blockquote, ul, ol, dl, table, pre {
      margin: 15px 0;
    }
    pre {
      border-radius: 5px;

      code {

        background-color: #f3f3f3;

        overflow: auto;
      }
    }
    h1,h2,h3,h4,h5,h6 {
      color: #4f4f4f;
      margin: 8px 0 16px;
      font-weight: 700;
      position: relative;
      &:hover{
        &:before {
          left: -28px;
          position: absolute;
          content: '「 ';
          color: #ff6d6d;
        }
        &:after{
          //position: absolute;
          content: ' 」';
          color: #ff6d6d;
        }
      }
      //&:before{
      //  content: '「 ';
      //  color: #ff6d6d;
      //}
      //&:after{
      //  content: ' 」';
      //  color: #ff6d6d;
      //}
    }

    h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
      font-size: inherit;
    }
    h1 {
      font-size: 28px;
      line-height: 36px;
    }
    h2 {
      font-size: 24px;
      line-height: 32px;
    }
    h3 {
      font-size: 22px;
      line-height: 30px;
    }
    h4 {
      font-size: 20px;
      line-height: 28px;
    }
    h5 {
      font-size: 18px;
      line-height: 26px;
    }
    h6 {
      font-size: 16px;
      line-height: 24px;
    }
    /* LINKS
    =============================================================================*/

    a {
      color: #6795b5;
      text-decoration: none;
    }
    a:active,
    a:hover {
      outline: 0;
    }
    a:hover,a:focus {
      color: #cb4b16;
      text-decoration: none;
    }

    /* LISTS
    =============================================================================*/
    ul, ol {
      padding-left: 30px;
      li{
        list-style-type: disc;
        margin: 8px 0 0 32px;
      }
    }


    ul ul, ul ol, ol ol, ol ul {
      margin-bottom: 0;
    }

    dl {
      padding: 0;
    }

    dl dt {
      font-size: 14px;
      font-weight: bold;
      font-style: italic;
      padding: 0;
      margin: 15px 0 5px;
    }

    dl dt:first-child {
      padding: 0;
    }

    dl dt>:first-child {
      margin-top: 0;
    }

    dl dt>:last-child {
      margin-bottom: 0;
    }

    dl dd {
      margin: 0 0 15px;
      padding: 0 15px;
    }

    dl dd>:first-child {
      margin-top: 0;
    }

    dl dd>:last-child {
      margin-bottom: 0;
    }

    /* CODE
    =============================================================================*/

    pre, code, tt {
      font-size: 15px;
      font-family: Consolas, "Liberation Mono", Courier, monospace;
    }

    code, tt {
      margin: 0 5px;
      padding: 2px;
      white-space: nowrap;
      color: #c7254e;
      background-color: #f9f2f4;
      border: 1px solid #eaeaea;
      border-radius: 3px;
    }

    pre>code {
      margin: 0;
      padding: 0;
      white-space: pre;
      color: #333;
      border: none;
      background: transparent;
    }

    pre {
      background-color: #f1efee;
      border: 1px solid #F9F9F9;
      line-height: 1.5rem;
      overflow: auto;
      padding: 6px 10px;
      border-radius: 3px;
    }

    pre code, pre tt {
      background-color: transparent;
      border: none;
    }
    /* QUOTES
    =============================================================================*/

    blockquote {
      border-left: 4px solid #ff6d6d;
      background-color: #f3f3f3;
      border-radius: 3px;
      padding: 15px 20px;
      margin: 15px 0;
      color: #777;
    }

    blockquote>:first-child {
      margin-top: 0;
    }

    blockquote>:last-child {
      margin-bottom: 0;
    }

    /* HORIZONTAL RULES
    =============================================================================*/

    hr {
      margin: 24px 0;
      border: none;
      border-bottom: 1px solid #ddd;
      clear: both;
    }

    /* TABLES
    =============================================================================*/
    table{
      margin: 0 auto;
      width: 100%;
      border-radius: 5px;
    }
    table th {
      font-weight: bold;
    }

    table th, table td {
      border: 1px solid #ccc;
      padding: 6px 13px;
    }

    table tr {

      background-color: #fff;

    }

    table tr:nth-child(2n) {
      background-color: #f8f8f8;
    }

    /* IMAGES
    =============================================================================*/

    img {
      max-width: 100%
    }
    /* P
    =============================================================================*/
    p{
      font-size: 16px;
      color: #4d4d4d;
      font-weight: 400;
      line-height: 26px;
      font-family: TwitterChirp;
    }

    /**
    =============================================================================*/
    @media (max-width: 800px) {
      ul, ol {
        padding-left: 10px;
        margin: 0;
        li{
          list-style: inside;
          margin: 0;
        }
      }
    }
  }
}